<div class="module-container">
  <h1>Buttons</h1>

  <hr/>

  <h2 id="buttons-options">Options</h2>

  <p>Use any of the available button classes to quickly create a styled button.</p>

  <div>
    <button type="button" class="gui-btn gui-btn-default">Default</button>
    <button type="button" class="gui-btn gui-btn-primary">Primary</button>
    <button type="button" class="gui-btn gui-btn-success">Success</button>
    <button type="button" class="gui-btn gui-btn-info">Info</button>
    <button type="button" class="gui-btn gui-btn-warning">Warning</button>
    <button type="button" class="gui-btn gui-btn-danger">Danger</button>
    <button type="button" class="gui-btn gui-btn-link">Link</button>
  </div>

 <pre class="prettyprint" style="margin-top: 12px;">
&lt!-- Standard gray button with gradient --&gt;
&lt;button type="button" class="gui-btn gui-btn-default"&gt;Default&lt;/button&gt;

&lt;!-- Provides extra visual weight and identifies the primary action in a set of buttons --&gt;
&lt;button type="button" class="gui-btn gui-btn-primary"&gt;Primary&lt;/button&gt;

&lt;!-- Indicates a successful or positive action --&gt;
&lt;button type="button" class="gui-btn gui-btn-success"&gt;Success&lt;/button&gt;

&lt;!-- Contextual button for informational alert messages --&gt;
&lt;button type="button" class="gui-btn gui-btn-info"&gt;Info&lt;/button&gt;

&lt;!-- Indicates caution should be taken with this action --&gt;
&lt;button type="button" class="gui-btn gui-btn-warning"&gt;Warning&lt;/button&gt;

&lt;!-- Indicates a dangerous or potentially negative action --&gt;
&lt;button type="button" class="gui-btn gui-btn-danger"&gt;Danger&lt;/button&gt;

&lt;!-- Deemphasize a button by making it look like a link while maintaining button behavior --&gt;
&lt;button type="button" class="gui-btn gui-btn-link"&gt;Link&lt;/button&gt;</pre>

  <h2 id="buttons-sizes">Sizes</h2>

  <p>Fancy larger or smaller buttons? Add <code>.gui-btn-lg</code>, <code>.gui-btn-sm</code>, or <code>.gui-btn-xs</code> for
    additional sizes.</p>

  <div>
    <p>
      <button type="button" class="gui-btn gui-btn-primary gui-btn-lg">Large button</button>
      <button type="button" class="gui-btn gui-btn-default gui-btn-lg">Large button</button>
    </p>
    <p>
      <button type="button" class="gui-btn gui-btn-primary">Default button</button>
      <button type="button" class="gui-btn gui-btn-default">Default button</button>
    </p>
    <p>
      <button type="button" class="gui-btn gui-btn-primary gui-btn-sm">Small button</button>
      <button type="button" class="gui-btn gui-btn-default gui-btn-sm">Small button</button>
    </p>
    <p>
      <button type="button" class="gui-btn gui-btn-primary gui-btn-xs">Extra small button</button>
      <button type="button" class="gui-btn gui-btn-default gui-btn-xs">Extra small button</button>
    </p>
  </div>

  <pre class="prettyprint">&lt;p&gt;
&nbsp; &lt;button type="button" class="gui-btn gui-btn-primary gui-btn-lg"&gt;Large button&lt;/button&gt;
&nbsp; &lt;button type="button" class="gui-btn gui-btn-default gui-btn-lg"&gt;Large button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
&nbsp; &lt;button type="button" class="gui-btn gui-btn-primary"&gt;Default button&lt;/button&gt;
&nbsp; &lt;button type="button" class="gui-btn gui-btn-default"&gt;Default button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
&nbsp; &lt;button type="button" class="gui-btn gui-btn-primary gui-btn-sm"&gt;Small button&lt;/button&gt;
&nbsp; &lt;button type="button" class="gui-btn gui-btn-default gui-btn-sm"&gt;Small button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
&nbsp; &lt;button type="button" class="gui-btn gui-btn-primary gui-btn-xs"&gt;Extra small button&lt;/button&gt;
&nbsp; &lt;button type="button" class="gui-btn gui-btn-default gui-btn-xs"&gt;Extra small button&lt;/button&gt;
&lt;/p&gt;</pre>

  <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.gui-btn-block</code>.</p>
  <div>
    <div class="well" style="max-width: 400px; margin: 0 auto 10px; _width: 400px;">
      <button type="button" class="gui-btn gui-btn-primary gui-btn-lg gui-btn-block">Block level button</button>
      <button type="button" class="gui-btn gui-btn-default gui-btn-lg gui-btn-block">Block level button</button>
    </div>
    <pre class="prettyprint">&lt;button type="button" class="gui-btn gui-btn-primary gui-btn-lg gui-btn-block"&gt;Block level button&lt;/button&gt;
&lt;button type="button" class="gui-btn gui-btn-default gui-btn-lg gui-btn-block"&gt;Block level button&lt;/button&gt;</pre>
  </div>

  <h2>Disabled state</h2>
  <p>Make buttons look unclickable by fading them back 50%.</p>

  <h3>Button element</h3>
  <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
  <p>
    <button type="button" class="gui-btn gui-btn-primary gui-btn-lg" disabled="disabled">Primary button</button>
    <button type="button" class="gui-btn gui-btn-default gui-btn-lg" disabled="disabled">Button</button>
  </p>
  <pre class="prettyprint">&lt;button type="button" class="gui-btn gui-btn-lg gui-btn-primary" disabled="disabled"&gt;Primary button&lt;/button&gt;
&lt;button type="button" class="gui-btn gui-btn-default gui-btn-lg" disabled="disabled"&gt;Button&lt;/button&gt;</pre>
  <div class="bs-callout bs-callout-danger">
    <h4>Cross-browser compatibility</h4>
    <p>If you add the <code>disabled</code> attribute to a <code>&lt;button&gt;</code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p>
  </div>

  <h3>Anchor element</h3>
  <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
  <p>
    <a href="#" class="gui-btn gui-btn-primary gui-btn-lg disabled">Primary link</a>
    <a href="#" class="gui-btn gui-btn-default gui-btn-lg disabled">Link</a>
  </p>
  <pre class="prettyprint">&lt;a href="#" class="gui-btn gui-btn-primary gui-btn-lg disabled"&gt;Primary link&lt;/a&gt;
&lt;a href="#" class="gui-btn gui-btn-default gui-btn-lg disabled"&gt;Link&lt;/a&gt;</pre>
  <p>
    We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
  </p>
  <div class="bs-callout bs-callout-warning">
    <h4>Link functionality not impacted</h4>
    <p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
  </div>

  <h2>Button tags</h2>
  <p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
  <form style="margin-bottom: 12px;">
    <a class="gui-btn gui-btn-default" href="#">Link</a>
    <button class="gui-btn gui-btn-default" type="submit">Button</button>
    <input class="gui-btn gui-btn-default" type="button" value="Input">
    <input class="gui-btn gui-btn-default" type="submit" value="Submit">
  </form>
  <pre class="prettyprint">&lt;a class="gui-btn gui-btn-default" href="#"&gt;Link&lt;/a&gt;
&lt;button class="gui-btn gui-btn-default" type="submit"&gt;Button&lt;/button&gt;
&lt;input class="gui-btn gui-btn-default" type="button" value="Input"&gt;
&lt;input class="gui-btn gui-btn-default" type="submit" value="Submit"&gt;</pre>
  <div class="bs-callout bs-callout-warning">
    <h4>Cross-browser rendering</h4>
    <p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
    <p>Among other things, there's <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a Firefox bug</a> that prevents us from setting the <code>line-height</code> of <code>&lt;input&gt;</code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
  </div>

  <h2>Cross-browser compatibility</h2>
  <div class="bs-callout bs-callout-danger">
    <p>You can use following codes for cross-browser compatibility, especially old ie version.</p>
    <pre class="prettyprint" style="margin-bottom: 0;">$(".gui-btn").guiButton();</pre>
  </div>
</div>